<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>无刷新添加删除input输入框-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta HTTP-EQUIV="expires" CONTENT="0">

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../static/css/font.css">
    <link rel="stylesheet" href="../../static/css/weadmin.css">
    <script src="../../lib/layui/layui.js" charset="utf-8"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        /* 新增删除图标的样式 */

        .layui-form-label {
            width: 100%;
            text-align: left;
        }

        .layui-form-label,
        .layui-form-item .layui-input-inline {
            margin-top: 10px;
        }

        .yf-input-del .layui-input-inline .layui-input {
            padding-right: 20px;
        }

        .yf-input-del .layui-input-inline i.layui-icon {
            position: absolute;
            right: 2px;
            top: 10px;
            color: #999999;
        }
    </style>

</head>

<body>
<div class="weadmin-nav">
			<span class="layui-breadcrumb">
		        <a href="">首页</a>
		        <a href="">会员管理</a>
		        <a><cite>输入框操作</cite></a>
		    </span>
    <a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">&#x1002;</i></a>
</div>
<div class="weadmin-body">
    <div class="weadmin-block">
        <button class="layui-btn" onclick="insertInput()"><i class="layui-icon"></i>新增1条教育背景</button>
        <span class="fr" style="line-height:40px">共有数据：<i class="numText">88</i> 条</span>
    </div>
    <div class="layui-form-item yf-input-del" id="edu_bg">
        <label class="layui-form-label">教育背景:</label>

        <div class="layui-input-inline" id="insertInput11">
            <input type="text" name="edu_bg[5]" value="" autocomplete="off" placeholder="请输入" lay-verify="required"
                   class="layui-input">
            <i class="layui-icon deleteEduBg">&#x1006;</i>
        </div>
        <div class="layui-input-inline" id="insertInput11">
            <input type="text" name="edu_bg[6]" value="" autocomplete="off" placeholder="点击删除图标删除该项输入"
                   lay-verify="required" class="layui-input">
            <i class="layui-icon deleteEduBg">&#x1006;</i>
        </div>
        <div class="layui-input-inline" id="insertInput11">
            <input type="text" name="edu_bg[9]" value="" autocomplete="off" placeholder="点击新增增加新的输入框"
                   lay-verify="required" class="layui-input">
            <i class="layui-icon deleteEduBg">&#x1006;</i>
        </div>
        <div class="layui-input-inline" id="insertInput11">
            <input type="text" name="edu_bg[10]" value="" autocomplete="off" placeholder="name生成判断不重复"
                   lay-verify="required" class="layui-input">
            <i class="layui-icon deleteEduBg">&#x1006;</i>
        </div>
        <div class="layui-input-inline" id="insertInput11">
            <input type="text" name="edu_bg[11]" value="" autocomplete="off" placeholder="避免随意删除新增后产生的name重复问题"
                   lay-verify="required" class="layui-input">
            <i class="layui-icon deleteEduBg">&#x1006;</i>
        </div>
    </div>

</div>

<script>
    layui.use(['element', 'jquery'], function () {
        var element = layui.element,
            $ = layui.jquery;

        var key1 = $("#edu_bg").children(".layui-input-inline").length;
        var FieldCount1 = 0;
        $(function () {
            $(".numText").html(key1);
            console.log("Hello,input输入框随意增加删除，新增时生成的name自动判断是否存在，存在则跳过，避免随意删除新增后提交因为name重复输入值被覆盖。");
        });

        window.insertInput = function () {
            //检索已有的input包含的name值
            var arr1 = [];
            FieldCount1++;
            $("#edu_bg input[type='text']").each(function () {
                arr1.push($(this).attr('name'));

            });
            //console.log(arr1);
            //alert(arr1);
            //所有name加入数组alert
            var div1 = $("<div></div>").addClass("layui-input-inline");
            //console.log(edu_bg[FieldCount1]);
            var newCount1 = "edu_bg[" + FieldCount1 + "]";
            //判断新生成的name值是否在已存在的数组中
            if ($.inArray(newCount1, arr1) === -1) {
                FieldCount1 = FieldCount1;
                var input1 = "<input type='text' name='edu_bg[" + FieldCount1 + "]' value='' autocomplete='off' placeholder='请输入' lay-verify='required' class='layui-input'>"
                var icon1 = "<i class='layui-icon deleteEduBg'>&#x1006;</i>";
                div1.append(input1, icon1);
                $("#edu_bg").append(div1); // 追加新元素
                key1++;
            } else {
                FieldCount1++;
                insertInput();
            }
            $(".numText").html(key1);

        }
        $("body").on("click", ".deleteEduBg", function (e) { //user click on remove text
            if (key1 > 1) {
                $(this).parent('div').remove(); //remove text box
                key1--; //decrement textbox
            } else {
                alert("请至少填写1条教育背景信息！");
                return false;
            }
            $(".numText").html(key1);

        })

    });
</script>

</body>

</html>